<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- App css -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- App js -->
    <script src="/js/vendor.min.js"></script>
    <script src="/js/app.min.js"></script>

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>

    <script src="echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js">

    </script>

</head>

<body>
<div id="app">
    <!-- Navigation Bar-->
    <header id="topnav">
        <nav class="navbar-custom">

            <div class="container-fluid">
                <ul class="list-unstyled topbar-right-menu float-right mb-0">

                    <li class="dropdown notification-list">
                        <!-- Mobile menu toggle-->
                        <a class="navbar-toggle nav-link">
                            <div class="lines">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                        <!-- End mobile menu toggle-->
                    </li>



                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle nav-user mr-0" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/users/2.jpg" alt="user-image" class="rounded-circle">
                            <small class="pro-user-name ml-1">
                                Admin
                            </small>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown ">
                            <!-- item-->
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">欢迎 !</h6>
                            </div>

                            <!-- item-->
                            <a href="adminInfo.html" class="dropdown-item notify-item">
                                <i class="fe-user"></i>
                                <span>管理员信息</span>
                            </a>

                            <!-- item-->
                            <a href="adminJournal.html" class="dropdown-item notify-item">
                                <i class="fe-settings"></i>
                                <span>日志</span>
                            </a>

                            <div class="dropdown-divider"></div>

                            <!-- item-->
                            <a href="pages-login.html" class="dropdown-item notify-item">
                                <i class="fe-log-out"></i>
                                <span>退出</span>
                            </a>

                        </div>
                    </li>

                </ul>

                <ul class="list-inline menu-left mb-0">
                    <li class="float-left">
                        <a href="page-index.html" class="logo">
                                <span class="logo-lg" >
                                    <img src="assets/images/111.png" alt="" height="42">
                                </span>
                            <!-- <span class="logo-sm">
                                <img src="assets/images/logo-sm.png" alt="" height="28">
                            </span> -->
                        </a>
                    </li>
                    <!--                        <li class="app-search">-->
                    <!--                            <form>-->
                    <!--                                <h2 style="color: azure;">学 习 养 成 计 划</h2>-->
                    <!--                            </form>-->
                    <!--                        </li>-->
                </ul>
            </div>

        </nav>
        <!-- end topbar-main -->

        <div class="topbar-menu">
            <div class="container-fluid">
                <div id="navigation">
                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="page-index.html">
                                <i class="fe-airplay"></i>首页</a>
                        </li>

                        <li class="has-submenu">
                            <a href="userQuery.html">
                                <i class="fe-user"></i>用户管理</a>
                        </li>

                        <li class="has-submenu">
                            <a href="taskQuery.html">
                                <i class="mdi mdi-codepen"></i>任务管理</a>
                        </li>

                        <li class="has-submenu">
                            <a href="tipQuery.html">
                                <i class="mdi mdi-brightness-5"></i>心得管理</a>
                        </li>



                        <li class="has-submenu">
                            <a href="chartUser.html"> <i class="mdi mdi-elevation-rise"></i>数据分析</a>
                            <ul class="submenu">
                                <li>
                                    <a href="chartUser.html">用户分析</a>
                                </li>
                                <li>
                                    <a href="chartTask.html">任务分析</a>
                                </li>
                                <li>
                                    <a href="chartTip.html">心得分析</a>
                                </li>
                                <li>
                                    <a href="chartAction.html">单个用户行为分析</a>
                                </li>
                            </ul>
                        </li>



                    </ul>
                    <!-- End navigation menu -->

                    <div class="clearfix"></div>
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
        <!-- end navbar-custom -->
    </header>
    <!-- End Navigation Bar-->

    <div class="wrapper" style="padding-top: 65px;">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="page-index.html">洋葱</a></li>
                                <li class="breadcrumb-item"><a href="chartUser.html">用户数量分析</a></li>
                            </ol>
                        </div>
                        <h4 class="page-title">用户数量分析</h4>

                        <div class="row">
                            <div class="col-xl-3 col-lg-6">
                                <div class="card widget-flat">
                                    <div class="card-body p-0">
                                        <div class="p-3 pb-0">
                                            <div class="float-right">
                                                <i class="mdi mdi-emoticon-excited text-primary widget-icon"></i>
                                            </div>
                                            <h5 class="text-muted font-weight-normal mt-0">用户总数</h5>
                                            <h3 class="mt-2">3,543</h3>
                                        </div>
                                        <div id="sparkline1"></div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->

                            <div class="col-xl-3 col-lg-6">
                                <div class="card widget-flat">
                                    <div class="card-body p-0">
                                        <div class="p-3 pb-0">
                                            <div class="float-right">
                                                <!--                  <i class="mdi mdi-currency-usd text-danger widget-icon"></i>-->
                                                <i class="mdi mdi-android-head text-danger widget-icon"></i>

                                            </div>
                                            <h5 class="text-muted font-weight-normal mt-0">今日新增用户</h5>
                                            <h3 class="mt-2">25,617</h3>
                                        </div>
                                        <div id="sparkline2"></div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->

                            <div class="col-xl-3 col-lg-6">
                                <div class="card widget-flat">
                                    <div class="card-body p-0">
                                        <div class="p-3 pb-0">
                                            <div class="float-right">
                                                <i class=" mdi mdi-approval text-primary widget-icon"></i>
                                            </div>
                                            <h5 class="text-muted font-weight-normal mt-0">任务总数</h5>
                                            <h3 class="mt-2">5,387</h3>
                                        </div>
                                        <div id="sparkline3"></div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->

                            <div class="col-xl-3 col-lg-6">
                                <div class="card widget-flat">
                                    <div class="card-body p-0">
                                        <div class="p-3 pb-0">
                                            <div class="float-right">
                                                <i class="mdi mdi-eye-outline text-danger widget-icon"></i>
                                            </div>
                                            <h5 class="text-muted font-weight-normal mt-0">心得发布数</h5>
                                            <h3 class="mt-2">74,315</h3>
                                        </div>
                                        <div id="sparkline4"></div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->
                        </div>
                                <!-- end row -->

                                <div class="row">
                                    <div class="col-xl-6">

<!--                   用户总人数分析                     -->
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="fe-arrow-down-right header-title"><strong>用户总人数</strong></h4>

                                                <div class="row" style="height:350px;">
<!--                                                    <div class="col-xl-4" >-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <p style="font-size: large;color: #00acc1">用户总人数达到：</p>-->
<!--                                                        <h1 class="display-4">111111</h1><br>-->

<!--                                                    </div>-->
                                                    <div class="col-xl-12" id="main"></div>
                                                </div>
                                            </div>
                                        </div>
<!--                   用户总人数分析                     -->



                                    </div>
                                    <div class="col-xl-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="fe-arrow-down-right header-title"><strong>每日活跃用户总数</strong></h4>

                                                <div class="row" style="height:350px;">
<!--                                                    <div class="col-xl-4" >-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <br>-->
<!--                                                        <p style="font-size: large;color: #00acc1">用户总人数达到：</p>-->
<!--                                                        <h1 class="display-4">111111</h1><br>-->

<!--                                                    </div>-->
                                                    <div class="col-xl-12" id="main1"></div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <!-- end row -->

                    </div>
                </div>
            </div>
            <!-- end page title -->


        </div> <!-- end container -->
    </div>
    <!-- end wrapper -->
    <!--        此处编辑主要内容：-->







    <!-- Footer Start -->
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    YangCong Admin &copy; 2021 - tecms.net
                </div>
                <div class="col-md-6">
                    <div class="text-md-right footer-links d-none d-sm-block">
                        <a href="#">关于我们</a>
                        <a href="#">帮助</a>
                        <a href="#">联系我们</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>        <!-- end Footer -->



</div>


</body>
</html>

<script type="text/javascript">
    //用户总人数柱状图
    $(function(){
        var myCharts=echarts.init(document.getElementById('main'));
        myCharts.setOption({
            toolbox: {
                show: true,
                feature: {
                    magicType: { type: ['bar','line', ] },//转换为折线图
                    restore: {},//重置
                    dataView: { readOnly: false },       //查看数据
                    saveAsImage: {}                      //保存为图片
                }
            },
            xAxis : {
                data : [],
                "splitLine": {     //网格线
                    "show": false},
                "axisTick":{       //y轴刻度线
                    "show":false
                },
                axisLine: {
                    show: false,//不显示坐标轴线
                },
                axisLabel: {
                    show: true,//显示坐标轴上的文字
                },},
            yAxis : {
                "splitLine": {     //网格线
                    "show": false},
                "axisTick":{       //y轴刻度线
                    "show":false
                },
                axisLabel:{
                    color: '#000000', //y轴字体显示颜色
                },
                axisLine: {
                    show: false,//不显示坐标轴线
                },
                axisLabel: {
                    show: false,//不显示坐标轴上的文字
                },
            },
            series : [
                {
                    name:'用户总人数柱状图',
                    type:'bar',
                    data:[]
                }
            ]
        });
        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值的日期的数组
        var createDate=[];
        //放y轴值的创建任务数量的数组
        var usersum=[];
        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url: "/user/all",     //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $(data).each(function(i,e){
                    console.log("2")
                    createDate.push(e.createDate);    //取出创建任务日期并存入数组
                    console.log("3")
                    usersum.push(e.usersum);     //取出每日创建的任务数并存入数组
                });
                console.log("1")
                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    xAxis: {
                        data: createDate,

                    },
                    dataZoom: [
                        {
                            show: false,
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 94,
                            end: 100
                        },
                        {
                            show: false,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '日新建任务总数',
                        type:'bar',
                        barWidth: '50%',
                        data: usersum,
                        itemStyle:{
                            normal: {
                                //柱形图圆角，初始化效果
                                barBorderRadius:[10],
                                label: {
                                    show: true,	//是否展示
                                    position: 'top', //在上方显示
                                    textStyle: {	//数值样式
                                        fontSize : '12',
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
                                    [
                                        {offset: 0, color: '#578bce'},
                                        {offset: 1, color: '#95c7e0'}
                                    ]
                                )
                            }},
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        showBackground: true,
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myCharts.hideLoading();
            }
        })
    });
</script>
<script type="text/javascript">
    //当日活跃用户柱状图
    $(function(){
        var myCharts=echarts.init(document.getElementById('main1'));
        myCharts.setOption({
            // title:{
            //     text:'活跃用户人数柱状图'
            // },
            toolbox: {
                show: true,
                feature: {
                    magicType: { type: ['bar','line', ] },//转换为折线图
                    restore: {},//重置
                    dataView: { readOnly: false },       //查看数据
                    saveAsImage: {}                      //保存为图片
                }
            },
            xAxis : {
                "splitLine": {     //网格线
                    "show": false},
                "axisTick":{       //y轴刻度线
                    "show":false
                },
                axisLine: {
                    show: false,//不显示坐标轴线
                },
                axisLabel: {
                    show: false,//显示坐标轴上的文字
                },

            },
            yAxis : {
                data : [],
                "splitLine": {     //网格线
                    "show": false},
                "axisTick":{       //y轴刻度线
                    "show":false
                },
                axisLabel:{
                    color: '#000000', //y轴字体显示颜色
                },
                axisLine: {
                    show: false,//不显示坐标轴线
                },
                axisLabel: {
                    show: true,//不显示坐标轴上的文字
                },
            },
            series : [
                {
                    name:'活跃用户人数柱状图',
                    type:'bar',
                    data:[]
                }
            ]
        });
        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值的日期的数组
        var active_time=[];
        //放y轴值的创建任务数量的数组
        var activeuser=[];
        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url: "/user/active",     //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $(data).each(function(i,e){
                    console.log("2")
                    active_time.push(e.active_time);    //取出创建任务日期并存入数组
                    console.log("3")
                    activeuser.push(e.activeuser);     //取出每日创建的任务数并存入数组
                });
                console.log("1")
                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    yAxis: {
                        data: active_time
                    },
                    dataZoom: [
                        {
                            show: false,
                            start: 0,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 94,
                            end: 100
                        },
                        {
                            show: false,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '活跃用户人数',
                        type:'bar',
                        barWidth: '30%',
                        data: activeuser,
                        itemStyle:{
                            normal: {
                                //柱形图圆角，初始化效果
                                barBorderRadius:[10],
                                label: {
                                    show: true,	//是否展示
                                    position: 'top', //在上方显示
                                    textStyle: {	//数值样式
                                        fontSize : '12',
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    1, 0, 0, 0, //哈哈哈，原来在这更改渐变方向，我的天
                                    [
                                        {offset: 0, color: '#578bce'},
                                        {offset: 1, color: '#95c7e0'}
                                    ]
                                )
                            }},
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        },
                        color:"#008B8B ", //柱状图颜色
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myCharts.hideLoading();
            }
        })
    });

</script>



